﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/User/ViewMasterPage.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <title>实时数据</title> 
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="LeftMenuContent" runat="server">
        <li><a href="/User/Index"><span class="glyphicon glyphicon-dashboard"></span> 首页</a></li>
		<li><a href="/User/Widgets"><span class="glyphicon glyphicon-th"></span> 医生</a></li>
		<li  class="active"><a href="/User/Charts"> <span class="glyphicon glyphicon-stats"></span>实时数据</a></li>
		<li><a href="/User/Tables">                 <span class="glyphicon glyphicon-list-alt"></span>数据历史</a></li>
		<li><a href="/User/Forms">                  <span class="glyphicon glyphicon-pencil"></span>病历</a></li>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

		
	<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">实时数据</li>
			</ol>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">实时数据</h1>
				
			</div>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">检测图</div>
					<div class="panel-body">
						<div class="canvas-wrapper">
							<canvas class="main-chart" id="line-chart2" height="200" width="600"></canvas>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.row-->
<%--		
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">Bar Chart</div>
					<div class="panel-body">
						<div class="canvas-wrapper">
							<canvas class="main-chart" id="bar-chart" height="200" width="600"></canvas>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.row-->		
		
		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">Pie Chart</div>
					<div class="panel-body">
						<div class="canvas-wrapper">
							<canvas class="chart" id="pie-chart" ></canvas>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">Doughnut Chart</div>
					<div class="panel-body">
						<div class="canvas-wrapper">
							<canvas class="chart" id="doughnut-chart" ></canvas>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>Label:</h4>
						<div class="easypiechart" id="easypiechart-blue" data-percent="92" ><span class="percent">92%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>Label:</h4>
						<div class="easypiechart" id="easypiechart-orange" data-percent="65" ><span class="percent">65%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>Label:</h4>
						<div class="easypiechart" id="easypiechart-teal" data-percent="56" ><span class="percent">56%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>Label:</h4>
						<div class="easypiechart" id="easypiechart-red" data-percent="27" ><span class="percent">27%</span>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.row-->--%>
											
	</div>	<!--/.main-->
    <input type="hidden" id="hidden" name="Data_Id" value="123123" />
</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="JsContent" runat="server">
    <script>
        var randomScalingFactor = function () { return Math.round(Math.random() * 1000) };
        var chart1 = document.getElementById("line-chart2").getContext("2d");
        var lineChartData2 = {
            labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"
            ,"21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40"],
            datasets: [
                {
                    label: "My Second dataset",
                    fillColor: "rgba(244, 92, 62, 0.2)",
                    strokeColor: "rgba(244, 92, 62, 0.2)",
                    pointColor: "rgba(244, 92, 62, 0.2)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(244, 92, 62, 0.2)",
                    data: [3500, 3500, 3500, 3500, 3500, 3500, 3500, 3500, 3500, 3500, 00, 3500, 3500, 3500, 3500, 3500, 3500, 3500, 3500, 3500, 00, 3500, 3500, 3500, 3500, 3500, 3500, 3500, 3500, 3500,
                    3500, 3500, 3500, 3500, 3500, 3500, 3500, 3500, 3500, 3500]
                }
            ]

        }

        function chars(data) {
            var i = 0; 
            for (i = 0; i < 39;i++){
                window.myLine.datasets[0].points[i].value = window.myLine.datasets[0].points[i + 1].value;           
            }
            window.myLine.datasets[0].points[39].value = data;//randomScalingFactor2();
            window.myLine.update();
        };
    
        function cycle(data) {
            var time = 0;
            var datas = new Array();
            datas = data.split(",");
            var leng = datas.length;
            var Timer = setInterval(function () {
                time++;
                if (datas[time])
                { chars(datas[time]); }
           }, 200);
            if (time > 9) {
               clearInterval(Timer);
           }
        };

        function GetChars() {
            $.post("/User/RealTime", {
                "Id": $("#hidden").val()
            }, function (data) {
                if (data) {
                    cycle(data.NowTime);
                    $("#hidden").val(data.Id);
                }      
            });
        };

        window.onload = function () { 
            window.myLine = new Chart(chart1).Line(lineChartData2, {
                animation: false, responsive: true
            });
            window.setInterval(GetChars, 2000);
        }
    </script>
</asp:Content>




